<script setup lang="ts">
import { PAGING } from '@/constant'
import type { TableColumn } from '@/types'
import { Search } from '@element-plus/icons-vue'
import PanchaInformation from '../tanpancha-lists/components/pancha-information/index.vue'

const templateName = ref('')
const protocol = ref()
const loading = ref(false)
const tableData = shallowRef([])
const columns: TableColumn<any>[] = [
  {
    key: uuid(),
    label: '模板名称',
    prop: 'name',
  },
  {
    key: uuid(),
    label: '核算标准',
    prop: 'protocolCode',
  },
  {
    key: uuid(),
    label: '核算主体',
    prop: 'pointFullName',
  },
  {
    key: uuid(),
    label: '创建人',
    prop: 'creationName',
  },
  {
    key: uuid(),
    label: '更新时间',
    prop: 'updateTime',
  },
]
const tanpanchaStore = useTanpanchaStore()
const pointId = ref()
const protocolCode = ref()
const dataTime = ref()
const pagination = reactive({
  pageNumber: PAGING.PARAMS.pageNumber,
  pageSize: PAGING.PARAMS.pageSize,
  total: 0,
})

const isTplViewing = ref(false)
const readonly = ref(false)
const showPanchaInformation = ref(false)
const templateId = ref()
const lockCarbonInventory = ref(false)

async function clickSearch() {
  pagination.pageNumber = 1
  await nextTick()
  getTableData()
}

async function handleClickNode(node: any) {
  pointId.value = node.id
  await nextTick()
  getTableData()
}

async function getTableData() {
  loading.value = true
  try {
    const { data } = await carbonInventoryApi.queryTplByPage({
      pageNumber: pagination.pageNumber,
      pageSize: pagination.pageSize,
      name: unref(templateName),
      protocolCode: unref(protocol),
      pointId: unref(pointId),
    })
    tableData.value = data.records ?? []
    pagination.total = data.total
  }
  finally {
    loading.value = false
  }
}

async function handleDeleteTpl(row: any) {
  const res = await ElMessageBox.confirm('是否删除该模板？', '操作提示').catch(() => {})
  if (res && res === 'confirm') {
    carbonInventoryApi.deleteCarbonInventoryTemplateById(row.id).then(() => {
      ElMessage.success('删除成功')
      getTableData()
    })
  }
}

async function handleUseTpl(row: any) {
  pointId.value = row.pointId
  protocolCode.value = row.protocolCode
  templateId.value = row.id
  dataTime.value = `${new Date().getFullYear()}`
  lockCarbonInventory.value = false
  isTplViewing.value = false
  readonly.value = false
  await nextTick()
  showPanchaInformation.value = true
}

async function handleViewTpl(row: any) {
  pointId.value = row.pointId
  protocolCode.value = row.protocolCode
  templateId.value = row.id
  dataTime.value = undefined
  lockCarbonInventory.value = true
  isTplViewing.value = true
  readonly.value = true
  await nextTick()
  showPanchaInformation.value = true
}
</script>

<template>
  <div class="padding-sm flex container">
    <ReadonlyPointTree
      fire
      :need-full-name="1"
      class="flex-incompressible"
      @click-node="handleClickNode"
    />
    <div
      class="flex-direction flex-fillRemaining margin-left-sm overflow flex flex-col"
    >
      <ElForm inline class="w-full">
        <ElFormItem label="模板名称">
          <ElInput v-model="templateName" placeholder="输入模板名称" class="!w-60" clearable />
        </ElFormItem>
        <ElFormItem label="核算标准">
          <ElSelect v-model="protocol" class="!w-60" clearable>
            <ElOption v-for="item in tanpanchaStore.standards" :key="item.value" :label="item.name" :value="item.value" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary" :icon="Search" @click="clickSearch">
            查询
          </ElButton>
        </ElFormItem>
      </ElForm>
      <div class="flex flex-auto flex-col overflow-auto">
        <view-table
          :loading="loading"
          :columns="columns"
          :data="tableData"
          :show-toolbox="false"
          :operate-width="200"
          border
          row-key="id"
        >
          <template #operate="{ row }">
            <ElButton type="primary" size="small" @click="handleUseTpl(row)">
              使用
            </ElButton>
            <ElButton type="success" size="small" @click="handleViewTpl(row)">
              查看
            </ElButton>
            <ElButton type="danger" size="small" @click="handleDeleteTpl(row)">
              删除
            </ElButton>
          </template>
        </view-table>

        <!-- 分页 -->
        <ListsPagination
          v-model:page-num="pagination.pageNumber"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          @current-change="getTableData"
          @size-change="getTableData"
        />
      </div>
    </div>

    <PanchaInformation
      v-if="showPanchaInformation"
      v-model="showPanchaInformation"
      :initial-protocol="protocolCode"
      :initial-year="dataTime"
      :initial-point="pointId"
      :type="1"
      :readonly="readonly"
      :lock-carbon-inventory="lockCarbonInventory"
      :is-tpl-viewing="isTplViewing"
      :template-id="templateId"
      @destroy-template-id="templateId = undefined"
    />
  </div>
</template>
